<template>


    <div id="relationChart" style="width: 1000px;height: 800px;margin:0 auto">
      
    </div>
</template>

<script>
import { postAjax, getAjax } from "../../../api/api.js";
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      proData: [],
      cityData: [],
      companylist: [],
      linksArry: [],
      linksArrys: [],
      link: [],
      datas: []
    };
  },
  methods: {
    matchPolicyList(ids, companyName) {
      getAjax("/poliInterface/matchPolicyList/" + ids).then(response => {
        if (response.data.code === 0) {
          this.isLoading = false;
          this.proData=[];
          this.proData.push({
            name: companyName,
            draggable: true,
            symbolSize: [115, 115],
            itemStyle: {
              color: "#f00002"
            },
            category: "企业名称"
          });
          let _this = this;
          this.cityData = [];
          this.companylist = [];
          this.linksArry = [];
          this.linksArrys = [];
          response.data.obj.forEach(element => {
            element.arr.forEach(item => {
              _this.linksArrys.push({
                target: item.subjectName,
                source: companyName
              });
              _this.companylist.push({
                name: item.subjectName,
                draggable: true,
                symbolSize: [90, 90],
                itemStyle: {
                  color: "#00ff00"
                },
                category: element.style
              });
              item.policyArr.forEach(res => {
                _this.linksArry.push({
                  target: res.policyTitle,
                  source: item.subjectName
                });
                _this.cityData.push({
                  name: res.policyTitle,
                  draggable: true,
                  symbolSize: [90, 90],
                  itemStyle: {
                    color: "#00ff00"
                  },
                  category: element.style
                });
              });
            });
          });
          this.datas = this.proData.concat(this.companylist, this.cityData);
          this.link = this.linksArry.concat(this.linksArrys);
            // this.datas=this.proData.concat(this.companylist)
            // this.link=this.linksArrys
          console.log(this.datas);
          console.log(this.link);
          this.Pie("relationChart");
        } else {
          this.$Message.warning("数据请求异常");
        }
      });
    },

    Pie(id) {
      this.charts = echarts.init(document.getElementById(id));

      this.charts.setOption({
        backgroundColor: "#ffffff", // 背景颜色
        title: {
          // 图表标题
          text: "", // 标题文本
          left: "10%", // 标题距离左侧边距
          top: "5%", // 标题距顶部边距
          textStyle: {
            // 标题样式
            color: "#242424", // 标题字体颜色
            fontSize: "16" // 标题字体大小
          }
        },
        legend: {
          orient: "vertical",
          itemGap: 20,
          itemWidth: 50,
          itemHeight: 20,
          x: "20",
          y: "73",
          //分别修改legend格式
          data: [
            {
              name: "资质认定",
              textStyle: { color: "#333333" },
              icon: "stack"
            },
            {
              name: "平台认定",
              textStyle: { color: "#333333" },
              icon: "stack"
            },
            {
              name: "财税筹划",
              textStyle: { color: "#333333" },
              icon: "stack"
            },
            {
              name: "研发项目",
              textStyle: { color: "#333333" },
              icon: "stack"
            },
            {
              name: "人才项目",
              textStyle: { color: "#333333" },
              icon: "stack"
            },
            { name: "企业名称", textStyle: { color: "#333333" }, icon: "stack" }
          ],
          selected: {
            资质认定: true,
            平台认定: true,
            财税筹划: true,
            研发项目: true,
            人才项目: true,
            企业名称: true
          },
          selectedMode: true, //设置图例点击无效果
          textStyle: {
            fontSize: 12,
            color: "#F1F1F3"
          }
        },
        color: ["#fd485e", "#15acc2", "#ff9e00", "#2299ee", "#5045f6"],
        tooltip: {
          // 提示框的配置
          formatter: function(param) {
            if (param.dataType === "edge") {
              //return param.data.category + ': ' + param.data.target;
              return param.data.target;
            }
            //return param.data.category + ': ' + param.data.name;
            return param.data.name;
          }
        },

        series: [
          {
            type: "graph", // 系列类型:关系图
            top: "15%", // 图表距离容器顶部的距离
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
            force: {
              // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
              // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
              repulsion: 1000, // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
              edgeLength: [100, 100] // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
              // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
              // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
            },
            layout: "force", // 图的布局。[ default: 'none' ]
            // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
            // 'circular' 采用环形布局;'force' 采用力引导布局.
            // 标记的图形
            //symbol: "path://M19.300,3.300 L253.300,3.300 C262.136,3.300 269.300,10.463 269.300,19.300 L269.300,21.300 C269.300,30.137 262.136,37.300 253.300,37.300 L19.300,37.300 C10.463,37.300 3.300,30.137 3.300,21.300 L3.300,19.300 C3.300,10.463 10.463,3.300 19.300,3.300 Z",
            symbol: "circle",
            edgeSymbol: ["none", "arrow"], //箭头
            lineStyle: {
              // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
              normal: {
                color: "target", // 线的颜色[ default: '#aaa' ]
                width: 1, // 线宽[ default: 1 ]
                type: "solid", // 线的类型[ default: solid ]   'dashed'    'dotted'
                opacity: 0.5, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                curveness: 0 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
              }
            },
            label: {
              // 关系对象上的标签
              normal: {
                   formatter: function(e) {
                   var newStr=" ";
                    var start,end;
            　　　　var name_len=e.name.length;    　　　　　　　　　　　　   //每个内容名称的长度
            　　　　var max_name=6;    　　　　　　　　　　　　　　　　　　//每行最多显示的字数
            　　　　var new_row = Math.ceil(name_len / max_name); 　　　　// 最多能显示几行，向上取整比如2.1就是3行
            　　　　if(name_len>max_name){ 　　　　　　　　　　　　　　  //如果长度大于每行最多显示的字数
              　　　　　for(var i=0;i<new_row;i++){ 　　　　　　　　　　　   //循环次数就是行数
        　　　　　　　　var old='';    　　　　　　　　　　　　　　　　    //每次截取的字符
        　　　　　　　　start=i*max_name;    　　　　　　　　　　     //截取的起点
        　　　　　　　　 end=start+max_name;    　　　　　　　　　  //截取的终点
        　　　　　　　　if(i==new_row-1){    　　　　　　　　　　　　   //最后一行就不换行了
          　　　　　　　　　　old=e.name.substring(start);
        　　　　　　　　}else{
          　　　　　　　　　　old=e.name.substring(start,end)+"\n";    
        　　　　　　　　 }
        　　　　　　　　　　 newStr+=old; //拼接字符串
      　　　　　　  }
            　　　   }else{                                          //如果小于每行最多显示的字数就返回原来的字符串
              　　　　　　newStr=e.name; 
            　　　  }
                  // 标签内容
                  return newStr;
                  // alert(newStr)
                },
                show: true, // 是否显示标签
                position: "inside", // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                textStyle: {
                  // 文本样式
                  fontSize: 14
                }
              }
            },
            edgeLabel: {
              // 连接两个关系对象的线上的标签
              normal: {
                show: false,
                textStyle: {
                  fontSize: 14
                },
                formatter: function(param) {
                  // 标签内容
                  return param.data.category;
                }
              }
            },
            data: this.datas,
            categories: [
              {
                // 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
                name: "资质认定" // 类目名称，用于和 legend 对应以及格式化 tooltip 的内容。
              },
              {
                name: "平台认定"
              },
              {
                name: "财税筹划"
              },
              {
                name: "研发项目"
              },
              {
                name: "人才项目"
              },
              {
                name: "企业名称"
              }
            ],
            links: this.link
          }
        ],

        animationEasingUpdate: "quinticInOut", // 数据更新动画的缓动效果。[ default: cubicOut ]    "quinticInOut"
        animationDurationUpdate: 100
      });
      window.onresize = this.charts.resize;
    }
  },
  //调用
  mounted() {
    // this.$nextTick(function() {
    // });
  }
};
</script>
<style>
</style>
